<template>
  <el-dialog title="添加页面" :visible="showClientDialog" height="50%" @close="closeFn">
    <el-form ref="form" label-width="80px" :model="formData" :rules="formRules">
      <el-form-item label="经纪">
        <el-select v-model="formData.agent" placeholder="经纪">
          <el-option
            v-for="item in selDatas"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="formData.email" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="formData.phone" />
      </el-form-item>
      <el-form-item label="微信">
        <el-input v-model="formData.wechat" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="formData.desc" />
      </el-form-item>
      <el-form-item label="封面">
        <!-- 上传图片 -->
        <UploadImage ref="imgPhoto1" />
        <el-input v-model="formData.image" placeholder="强制设置图片跳过上传" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row>
        <el-button type="primary" size="small" @click="confirmFn">确认</el-button>
        <el-button size="small" @click="closeFn">取消</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
// 引入经纪列表,编辑客户接口
import { getBrokers } from '@/api/brokers'
// 引入新增客户接口
import { addClientCount, editClientCount, ClientCountDetail } from '@/api/client'

export default {
  props: {
    showClientDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        agent: '', // 经纪人
        image: '' // 图片链接输入框

      },
      formRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3~9]\d{9}$/, message: '请输入正确的手机格式', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ]
      },
      selDatas: [] // 经纪人下拉框

    }
  },
  async created() {
    const res = await getBrokers()
    this.selDatas = res.data
    this.$emit('updateEvent')
  },
  methods: {
    async ClientCountDetail(id) {
      const resss = await ClientCountDetail(id)
      this.formData = resss.data
      if (this.formData.image) {
        this.$refs.imgPhoto1.fileList.push({
          url: this.formData.image
        })
      }
    },
    // 确认添加、编辑功能
    async confirmFn() {
      const clientphoto = this.$refs.imgPhoto1
      this.formData.image = clientphoto.fileList[0].url
      if (this.formData.id) {
        // 编辑功能
        await editClientCount(this.formData)
      } else {
        // 新增功能
        await addClientCount(this.formData)
      }
      this.closeFn()
    },
    // 关闭弹窗
    closeFn() {
      this.$emit('update:showClientDialog', false)
      // 重新渲染列表
      this.$emit('updateEvent')
      // 清空效验
      this.formData = {
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        agent: '', // 经纪人
        image: '' // 图片链接输入框
      }
      // 清空效验
      this.$refs.form.resetFields()
      this.$refs.imgPhoto1.fileList = []
    }
  }
}
</script>

<style lang="scss">

</style>
